<template>
  <form @submit.prevent class="user-edit-pwd-wrapper" :class="fadeOutCls">
    <h2>更改密码</h2>

    <ul class="inputs">
      <li>
        <password-input
        class="old-pwd-input"
        placeholder="请输入旧密码"
        @change="e => {this.oldPwd=e.target.value}"
        ></password-input>
        <p>不输入则需要邮件确认</p>
      </li>
      <li>
        <password-input
        class="new-pwd-input"
        placeholder="请输入新密码"
        @change="inputNewPwd($event.target.value)"
        ></password-input>
        <i class="iconfont icon-warning" v-show="ifError[1].sign"></i>
        <p v-show="ifError[1].sign">{{ ifError[1].message }}</p>
      </li>
      <li>
        <password-input
        class="new-pwd-confirm"
        placeholder="请确认新密码"
        @change="inputPwdConfirm($event.target.value)"
        ></password-input>
        <i class="iconfont icon-warning" v-show="ifError[2].sign"></i>
        <p v-show="ifError[2].sign">{{ ifError[2].message }}</p>
      </li>
    </ul>

    <button class="submit" @click="submit">修改</button>

    <i class="iconfont icon-cancel" @click="$emit('exit')"></i>
  </form>
</template>

<script>
import PasswordInput from '@/components/utils/Input/PasswordInput.vue';

  export default {
    components: {
      PasswordInput
    },
    props: {
      fadeOut: {
        type: Boolean,
        default: () => true
      },
    },
    data() {
      return {
        oldPwd: "",
        newPwd: "",
        pwdConfirm: "",
        ifError: [
          {
            sign: false,
            message: ''
          },
          {
            sign: false,
            message: ''
          },
          {
            sign: false,
            message: ''
          }
        ]
      }
    },
    methods: {
      inputNewPwd(password) {
        this.newPwd = password;
        this.checkPwd();
      },
      inputPwdConfirm(password) {
        this.pwdConfirm = password;
        this.checkPwd();
      },
      checkPwd() {
        if(this.newPwd !== this.pwdConfirm) {
          this.ifError[1].sign = this.ifError[2].sign = true;
          this.ifError[1].message = this.ifError[2].message = '两次输入密码不一致';
        }
        else if(!(/[a-zA-Z]/.test(this.newPwd) && /[0-9]/.test(this.newPwd))) {
          this.ifError[1].sign = this.ifError[2].sign = false;
          this.ifError[1].message = this.ifError[2].message = '';
          this.ifError[1].sign = true;
          this.ifError[1].message = '密码至少包含一个字母和一个数字';
        } else if(this.newPwd.length < 6) {
          this.ifError[1].sign = this.ifError[2].sign = false;
          this.ifError[1].message = this.ifError[2].message = '';
          this.ifError[1].sign = true;
          this.ifError[1].message = '密码长度至少六位';
        }
        else {
          this.ifError[1].sign = this.ifError[2].sign = false;
          this.ifError[1].message = this.ifError[2].message = '';
          return true;
        }
      },
      submit() {
        let kvp = {
          key: 'userpwd',
          value: this.newPwd
        };
        if(this.oldPwd) kvp.oldpwd = this.oldPwd;
        this.$store.commit('changeAccountInfo', kvp);
      }
    },
    computed: {
      fadeOutCls() {
        return this.fadeOut ? 'fadeOut' : '';
      }
    },
  }
</script>

<style lang="less" scoped>
.user-edit-pwd-wrapper {
  box-sizing: border-box;
  padding: 2vw 1vw;

  background-color: white;
  border-radius: 1vw;
  transition: .3s;

  h2 {
    text-align: center;
    color: var(--blue);
    font-size: 1.8vw;
  }

  .old-pwd-input,
  .new-pwd-input,
  .new-pwd-confirm {
    --passwordInputWidth: 20vw;
    --passwordInputHeight: 3vw;
    --passwordInputFontsize: 1.2vw;
    margin: 2vw auto;
  }

  > .iconfont {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: .5vw .8vw;
    font-size: 1vw;
    font-weight: bold;
    transition: .2s;

    &:hover {
      transform: rotate(90deg);
      cursor: pointer;
    }
  }

  .inputs li {
    position: relative;

    > i {
      color: red;
      position: absolute;
      top: 50%;
      right: 1vw;
      transform: translateY(-50%);
    }

    > p {
      position: absolute;
      top: 100%;
      left: 3vw;
      font-size: .6vw;
      color: red;
    }
  }

  > .submit {
    margin: 0 2.5vw;
    width: 20vw;
    height: 3vw;
    color: white;
    font-weight: bold;
		border-radius: 1.5vw;
		background-image: linear-gradient(-200deg, #fac0e7, #91baff);
  }
}

</style>